<template>
    <div class="main-content">
        <FirstColumn :data="dashboardData" />
        <SecondColumn :data="dashboardData" />
        <ThirdColumn :data="dashboardData" />
    </div>
</template>
<script setup>
import FirstColumn from './Column/FirstColumn.vue';
import SecondColumn from './Column/SecondColumn.vue';
import ThirdColumn from './Column/ThirdColumn.vue';
const props = defineProps({
    dashboardData: {
        type: Object,
        required: true
    }
});
</script>
<style scoped>
.main-content {
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    height: 90%;
    z-index: 8;
    display: flex;
    flex-direction: row;
    padding: 15px;
    box-sizing: border-box;
    gap: 15px;
}

@media (max-width: 768px) {
    .main-content {
        flex-direction: column;
    }
}
</style>